<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hellword.html</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>helloWorld</h1>
<hr>
<div id="app">
    <ul>
        <li v-for="item in itemss">
            {{item}}
        </li>
    </ul>

    <ul>
        <li v-for="(student,index) in sortStudents">
           {{index}} {{student.name}} - {{student.age}}
        </li>
    </ul>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            students:[
                {name:'jspang',age:32},
                {name:'Panda',age:30},
                {name:'PanPaN',age:21},
                {name:'King',age:45}
            ],
            items:[20,23,18,65,32,19,54,56,41]
        },
        computed:{
            itemss:function(){
                return this.items.sort(sortNumber);
            },
            sortStudents:function () {
                return sortByKey(this.students,'age');
            }
        }
    })

    //所有javascritp方法都有这个bug 排序 输出循环排序
    function sortNumber(a,b) {
        return a-b;
    }

    //数组对象方法排序:
    function sortByKey(array,key){
        return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
    }
</script>
</body>
</html>